<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>添加首页推荐品牌</title>
	<#include "/common/vue_resource.ftl">
</head>
<body>
<div id="app" v-cloak>
	<div class="ui-form">
		<div class="app-container">
			<div class="layui-row app-header">
				<div class="layui-col-md12 text-right">
					<el-input clearable v-model="params.name" placeholder="品牌名称" style="float: left; width: 200px;">
						<el-button slot="append" icon="el-icon-search" @click="seachData"></el-button>
					</el-input>
				</div>
			</div>

			<div class="app-list">
				<el-table
						ref="multipleTable"
						:data="rows"
						tooltip-effect="dark"
						style="width: 100%"
						@selection-change="handleSelectionChange">
					<el-table-column
							type="selection"
							width="55">
					</el-table-column>
					<el-table-column
							prop="name"
							label="品牌名称"
							width="170">
					</el-table-column>
					<el-table-column
							prop="productCount"
							label="商品数量"
							width="170">
					</el-table-column>
					<el-table-column
							prop="productCommentCount"
							label="评价数量"
							width="170">
					</el-table-column>
				</el-table>
				<div class="layui-row">
					<div class="layui-col-md6">
						<div class="app-table-num"><span class="num">共 {{total}} 条</span></div>
					</div>
					<div class="layui-col-md6 text-right">
						<span class="prev" @click="loadPrev">上一页</span>
						<span class="next" @click="loadNext">下一页</span>
					</div>
				</div>
				<el-row>
					<el-button style="margin-left: 200px;" @click="cancel">取消</el-button>
					<el-button type="primary" @click="add">确定</el-button>
				</el-row>
			</div>
		</div>
	</div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			params: {
				name:'',
				page: 1,
			},
			rows: [],
			total: 0,
			multipleSelection: []
		},
		mounted: function () {
			this.init();
			this.loadData();
		},
		methods: {
			init:function(){
				var that = this;
				/*laydate.render({elem: '#beginDate', type:'datetime', done:function (value) {
						that.record.beginDate = value;
					}});*/
			},
			seachData:function(){
				this.params.page = 1;
				this.$nextTick(function () {
					this.loadData();
				});
			},
			loadData: function () {
				var that = this;
				$.http.post('${params.contextPath}/web/pmsBrand/list.json', this.params).then(function (data) {
					if (!data.success) {
						$.message(data.message);
						return;
					}
					console.log(data);
					that.rows = data.rows;
					that.total = data.total;
				});
			},
			loadNext: function () {
				if (this.rows.length < 20 && this.rows.length > 0) {
					return;
				}
				console.log("下一页: " + this.params.page);
				this.params.page = this.params.page + 1;
				this.loadData();
			},
			loadPrev: function () {
				if (this.params.page <= 1) {
					return;
				}
				console.log("上一页: " + this.params.page);
				this.params.page = this.params.page - 1;
				this.loadData();
			},
			cancel: function () {
				parent.app.loadData();
				parent.layer.closeAll();
			},
			add: function () {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请选择至少一条记录!');
					return false;
				}
				debugger
				$.http.post('${params.contextPath}/web/smsHomeBrand/save.json', {"multipleSelection": JSON.stringify(this.multipleSelection)}).then(function (data) {
					if (!data.success) {
						$.message(data.data);
						return;
					}
					var alt = layer.alert(data.data || "操作成功", function () {
						parent.app.loadData();
						parent.layer.closeAll();
						layer.close(alt);
					});
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
			}
		}
	});
</script>
</body>

</html>
